@layout("/common/_container.html"){
<style>
    html{
        width:100%;
        overflow-x:hidden;
    }
    .medicalRecord{
        font-size: 14px;
        height: 100%;
        background: #F9F9F9;
    }
    .medicalRecordHeader{
        height: 3.5em;
        line-height: 3.5em;
        position: fixed;
        background: white;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 1em;
        display: flex;
    }
    .medicalRecordHeader > div{
        flex: 1;
    }
    .medicalRecordHeader > div:nth-child(2){
        color: black;
        text-align: center;
        font-size: 16px;
    }
    .medicalRecordHeader > div:nth-child(3){
        text-align: right;
        color: #00a6c9;
    }

    .medicalRecordContent{
        padding-top: 4em;
        height: 100%;
        overflow: auto;
    }
    .medicalRecordContent > div{
        margin-bottom: 0.5em;
    }
    .medicalRecordContent::-webkit-scrollbar{
        width: 3px;
    }

    /*医生-时间*/
    .medicalRecordOption{
        background: white;
    }
    .medicalRecordOption > div{
        border-bottom: 1px solid #E5E5E5;
        background: white;
        display: flex;
        padding: 0.8em;
        position: relative;
    }
    .medicalRecordOption > div > div:first-of-type{
        flex: 1;
    }
    .medicalRecordOption > div > div:last-of-type{
        flex: 4;
    }
    .medicalRecordOption > div > div:last-of-type > span{
        position: absolute;
        right: 0.8em;
        top: 50%;
        transform: translateY(-50%);
    }

    .medicalRecordOption > div > div:last-of-type > input{
        width: 100%;
        text-align: right;
        border: none;
        outline: none;
        padding-right: 1.5em;
    }

    /*病历input框*/
    .medicalRecordInput > div,
    .medicalRecordTooth > div{
        border-bottom: 1px solid #E5E5E5;
        background: white;
        padding: 0.8em;
    }
    .medicalRecordInput > div input,
    .medicalRecordTooth > div input{
        width: 100%;
        border: none;
        outline: none;
        font-size: 12px;
    }
    /*病历牙位*/
    .medicalRecordTooth > div > div:first-of-type{
        display: flex;
        padding-bottom: 0.5em;
    }
    .medicalRecordTooth > div > div:first-of-type > div:last-of-type{
        flex: 1;
        text-align: right;
        color: #00a6c9;
    }

    .medicalRecordTooth > div > div:last-of-type{
        border: 1px solid #eeeeee;
        border-radius: 0.5em;
        padding: 1.5em 0 0.3em;
    }
    .medicalRecordTooth > div > div:last-of-type input{
        padding-left: 0.8em;
    }

    .medicalRecordTooth  .ToothBox > div:first-of-type{
        background: #f5f5f5;
        margin-bottom: 0.3em;
    }
    .medicalRecordTooth  .ToothBox > div:first-of-type > div{
        display: flex;
    }
    .medicalRecordTooth  .ToothBox > div:first-of-type > div > div{
        flex: 1;
    }
    .medicalRecordTooth  .ToothBox > div:first-of-type > div:first-of-type > div:nth-child(1){
        text-align: right;
        border-right: 1px solid #00a6c9;
        border-bottom: 1px solid #00a6c9;
    }
    .medicalRecordTooth  .ToothBox > div:first-of-type > div:first-of-type > div:nth-child(2){
        border-bottom: 1px solid #00a6c9;
    }
    .medicalRecordTooth  .ToothBox > div:first-of-type > div:last-of-type > div:nth-child(1){
        text-align: right;
        border-right: 1px solid #00a6c9;
    }
    .medicalRecordTooth  .ToothBox > div > div > div{
        padding: 0.2em;
    }
</style>

<div class="medicalRecord">
    <!--头部-->
    <div class="medicalRecordHeader">
        <div onclick="patientDetails()"><span class="glyphicon glyphicon-menu-left"></span></div>
        <div>编辑病例</div>
        <div>保存</div>
    </div>
    <!--内容-->
    <div class="medicalRecordContent">
        <!-- 医生-时间 -->
        <div class="medicalRecordOption">
            <div>
                <div>就诊时间</div>
                <div>
                    <input type="text">
                    <span class="glyphicon glyphicon-menu-right"></span>
                </div>
            </div>
            <div>
                <div>医生</div>
                <div>
                    <input type="text">
                    <span class="glyphicon glyphicon-menu-right"></span>
                </div>
            </div>
            <div>
                <div>助手</div>
                <div>
                    <input type="text">
                    <span class="glyphicon glyphicon-menu-right"></span>
                </div>
            </div>
            <div>
                <div>就诊类型</div>
                <div>
                    <span style="right: 5em;">初诊</span>
                    <span>复诊</span>
                </div>
            </div>
            <div>
                <div>选择模板</div>
                <div>
                    <input type="text">
                    <span class="glyphicon glyphicon-menu-right"></span>
                </div>
            </div>
        </div>
        <!--病历input框-->
        <div class="medicalRecordInput">
            <div>
                <div>主诉</div>
                <div><input type="text" placeholder="请输入主诉"/></div>
            </div>
            <div>
                <div>现病史</div>
                <div><input type="text" placeholder="请输入现病史"/></div>
            </div>
            <div>
                <div>既往史</div>
                <div><input type="text" placeholder="请输入既往史"/></div>
            </div>
        </div>
        <!--病历牙位-->
        <div class="medicalRecordTooth ">
            <div>
                <div>
                    <div>口腔检查</div>
                    <div>新增</div>
                </div>
                <div class="ToothBox">
                    <div>
                        <div><div>1</div><div>2</div></div>
                        <div><div>3</div><div>4</div></div>
                    </div>
                    <div><input type="text" placeholder="请输入口腔检查"/></div>
                </div>
            </div>
            <div>
                <div>
                    <div>辅助检查</div>
                    <div>新增</div>
                </div>
                <div class="ToothBox">
                    <div>
                        <div><div>1</div><div>2</div></div>
                        <div><div>3</div><div>4</div></div>
                    </div>
                    <div><input type="text" placeholder="请输入辅助检查"/></div>
                </div>
            </div>
            <div>
                <div>
                    <div>诊断</div>
                    <div>新增</div>
                </div>
                <div class="ToothBox">
                    <div>
                        <div><div>1</div><div>2</div></div>
                        <div><div>3</div><div>4</div></div>
                    </div>
                    <div><input type="text" placeholder="请输入诊断"/></div>
                </div>
            </div>
            <div>
                <div>
                    <div>治疗方案</div>
                    <div>新增</div>
                </div>
                <div class="ToothBox">
                    <div>
                        <div><div>1</div><div>2</div></div>
                        <div><div>3</div><div>4</div></div>
                    </div>
                    <div><input type="text" placeholder="请输入治疗方案"/></div>
                </div>
            </div>
            <div>
                <div>
                    <div>处置</div>
                    <div>新增</div>
                </div>
                <div class="ToothBox">
                    <div>
                        <div><div>1</div><div>2</div></div>
                        <div><div>3</div><div>4</div></div>
                    </div>
                    <div><input type="text" placeholder="请输入处置"/></div>
                </div>
            </div>
        </div>
        <!--病历input框-->
        <div class="medicalRecordInput">
            <div>
                <div>医嘱</div>
                <div><input type="text" placeholder="请输入医嘱"/></div>
            </div>
            <div>
                <div>备注</div>
                <div><input type="text" placeholder="请输入备注"/></div>
            </div>
        </div>
    </div>
</div>

<script>
    //跳转到患者详情
    function patientDetails() {
        window.location.href = "${ctxPath}/doctorLooked/doctor_patientDetails";
    }

    $(".medicalRecordTooth").on('click','.ToothBox',function () {
        window.location.href = "${ctxPath}/doctorLooked/doctor_toothOption";
    })
</script>
@}
